<script setup lang="ts">

</script>

<template>
  <div class="wrap">
    <div class="card" v-for="item of 6">
      <div class="card__thumb">
        <svg t="1662879804494" class="icon" viewBox="0 0 1445 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5503" width="200" height="200">
          <path d="M0.005421 131.312941V584.282353a30.117647 30.117647 0 0 0 49.995294 22.889412l271.661177-236.724706a60.235294 60.235294 0 0 1 77.101176 0l259.011765 207.209412 142.757647-142.757647a60.235294 60.235294 0 0 1 80.112941-4.216471l301.176471 240.941176a60.235294 60.235294 0 1 1-75.294118 93.967059l-259.011765-207.209412-142.757647 142.757648a60.235294 60.235294 0 0 1-80.112941 4.21647L361.417186 493.929412l-301.176471 262.625882a180.705882 180.705882 0 0 0-60.235294 136.131765A131.312941 131.312941 0 0 0 131.318362 1024h1183.021177A131.312941 131.312941 0 0 0 1445.65248 892.687059V131.312941A131.312941 131.312941 0 0 0 1314.339539 0H131.318362A131.312941 131.312941 0 0 0 0.005421 131.312941zM1114.358362 421.647059a144.564706 144.564706 0 1 1 144.564706-144.564706A144.564706 144.564706 0 0 1 1114.358362 421.647059z" fill="currentColor" p-id="5504"></path>
        </svg>
      </div>

      <div class="card__content">
        <h3 class="title">
          <small>UX design</small>
          Make it easier to search and filter
        </h3>

        <p>Dolor croissant vanilla donut vanilla donut. Sugar lollipop lollipop sugar ipsum orange</p>
        <button>Read More</button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(600px, 100%), 1fr));
  gap: 1rem;
  padding: 1rem;
  .card {
    background: #ffffff;
    border: 1px solid rgb(0 0 0 / 0.31);
    box-shadow: 0px 0px 5px 4px rgb(0 0 0 / 0.04);
    border-radius: 1rem;
    display: flex;
    padding: 1rem;
    gap: 1rem;

    .card__thumb {
      // 根据元素的书写模式定义了元素区块的横向或纵向最小尺寸
      min-inline-size: 200px;
      aspect-ratio: 4 / 3;
      background: rgba(0, 209, 255, 0.38);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        // 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加黑边
        object-fit: contain;
        width: 50%;
        color: #d51616;
        // 描述元素的内容应该与元素的直系父元素的内容和元素的背景如何混合
        mix-blend-mode: difference;
      }
    }

    .card__content {
      flex: 1;
      min-width: 0;
      color: #000;
      display: flex;
      flex-direction: column;
      gap: 0.25em;

      h3 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        small {
          display: block;
          margin-bottom: 0.2em;
          font-size: 45%;
          color: rgb(58 89 90 / 0.85);
        }
      }
      p {
        font-size: 0.625rem;
        color: rgb(58 89 90 / 0.75);
      }

      button {
        display: inline-flex;
        // todo: auto 元素自动添加书写方向的边距 右侧对齐
        margin-inline-start: auto;
        // 添加块轴方向的编剧
        margin-block-start: auto;
        --background: #275efe;
        --text: #fff;
        --shadow: rgba(10, 22, 50, 0.24);
        background: var(--background);
        border-radius: 8px;
        box-shadow: 0 2px 8px -1px var(--shadow);
        transition: all .2s ease;
        border: none;
        padding: 0.5rem 1rem;
        color: var(--text);
        cursor: pointer;
        // 根据书写模式定义了元素区块的横向或者纵向的最小尺寸，对应min-width min-height
        min-block-size: 44px;
        align-items: center;
        &:hover {
          --background: #1f41a3;
          --shadow: rgba(10, 22, 50, 0.4);
        }
      }
    }

    &:nth-child(2n) {
      flex-direction: row-reverse;
      button {
        margin-inline-end: auto;
        margin-inline-start: initial;
      }
    }
  }
}
</style>
